<ion-modal-view class="modal-full-height">

  <ion-header-bar class="bar-positive">

    <button class="button button-clear visible-xs"
            ng-if="!slides.slider.activeIndex"
            ng-click="closeModal()" translate>COMMON.BTN_CANCEL
    </button>
    <button class="button button-icon button-clear icon ion-ios-arrow-back buttons header-item"
            ng-click="slidePrev()"
            ng-if="slides.slider.activeIndex">
    </button>

    <h1 class="title" translate>ACCOUNT.NEW.TITLE</h1>

    <button class="button button-clear icon-right visible-xs"
            ng-if="slides.slider.activeIndex === 0"
            ng-click="slideNext()">
      <span translate>COMMON.BTN_NEXT</span>
      <i class="icon ion-ios-arrow-right"></i>
    </button>
  </ion-header-bar>


    <ion-slides options="slides.options" slider="slides.slider">

      <!-- STEP 1: currency -->
      <ion-slide-page>
        <ion-content class="has-header padding">
          <div class="center padding" ng-if="loading">
            <ion-spinner class="icon" icon="android"></ion-spinner>
          </div>

          <div ng-if="!loading">


            <p ng-bind-html="'ACCOUNT.NEW.INTRO_WARNING_TIME'|translate:currency"></p>

            <div class="row responsive-sm">
              <div class="col">
                <div class="item card item-icon-left padding item-text-wrap stable-bg">
                  <i class="icon ion-android-warning  assertive"></i>

                  <p class="item-content item-icon-left-padding ">
                    <span class="dark" translate>ACCOUNT.NEW.INTRO_WARNING_SECURITY</span><br/>
                    <small translate>ACCOUNT.NEW.INTRO_WARNING_SECURITY_HELP</small>
                  </p>
                </div>
              </div>

              <div class="col">
                <div class="item card item-icon-left padding item-text-wrap stable-bg">
                  <i class="icon ion-information-circled positive"></i>
                  <p class="item-content item-icon-left-padding ">
                    <span class="dark" trust-as-html="'ACCOUNT.NEW.REGISTRATION_NODE'|translate:currency.node"></span><br/>
                    <small trust-as-html="'ACCOUNT.NEW.REGISTRATION_NODE_HELP'|translate:currency.node"></small>
                  </p>
                </div>
              </div>
            </div>


          </div>

          <p class="hidden-xs hidden-sm" ng-bind-html="'ACCOUNT.NEW.INTRO_HELP'|translate"></p>

          <div class="padding hidden-xs text-right">
            <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button" translate>COMMON.BTN_CANCEL
            </button>
            <button class="button button-positive icon-right ion-chevron-right ink" ng-click="slideNext()"
                    ng-disabled="loading" type="button" translate>
              COMMON.BTN_START
            </button>
          </div>
        </ion-content>
      </ion-slide-page>

      <!-- STEP 2: account type -->
      <ion-slide-page>
        <ion-content class="has-header padding">
          <p translate>ACCOUNT.NEW.SELECT_ACCOUNT_TYPE</p>
          <div class="list">
            <!-- member account -->
            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
               ng-click="selectAccountTypeAndClose('member')">
              <div class="item-content item-text-wrap">
                <i class="item-image icon dark ion-person"></i>
                <h2 translate>ACCOUNT.NEW.MEMBER_ACCOUNT</h2>
                <h4 class="gray" ng-bind-html="'ACCOUNT.NEW.MEMBER_ACCOUNT_HELP'|translate:currency"></h4>
                <i class="icon dark ion-ios-arrow-right"></i>
              </div>
            </div>

            <!-- Allow extension here -->
            <cs-extension-point name="select-account-type"></cs-extension-point>

            <!-- simple wallet -->
            <div class="item item-complex card stable-bg item-icon-left item-icon-right ink"
               ng-click="selectAccountTypeAndClose('wallet')">
              <div class="item-content item-text-wrap">
                <i class="item-image icon dark ion-card"></i>
                <h2 translate>ACCOUNT.NEW.WALLET_ACCOUNT</h2>
                <h4 class="gray" translate>ACCOUNT.NEW.WALLET_ACCOUNT_HELP</h4>
                <i class="icon dark ion-ios-arrow-right"></i> </div>
            </div>
          </div>
          <div class="padding hidden-xs text-right">
            <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button" translate>COMMON.BTN_CANCEL
            </button>
          </div>
        </ion-content>
      </ion-slide-page>
    </ion-slide-box>
</ion-modal-view>
